<template>
  <div :style="'height:' + height">
    <iframe id="warmChart" :src="url" style="width: 100%; height: 100%" />
  </div>
</template>

<script setup>
  import {
    ref,
    onMounted,
    onBeforeUnmount
  } from 'vue';
  import {
    useRoute
  } from 'vue-router';
  import {
    getToken
  } from "@/utils/auth";
  import tab from "@/plugins/tab";

  const route = useRoute();
  const height = ref(`${document.documentElement.clientHeight - 94.5}px`);
  const url = ref("");

  const handleMessage = (event) => {
    console.log(event.data.method, event);
    if (event.data.method === "close") {
      close();
    }
  };

  const close = () => {
    tab.closeOpenPage({
      path: "/flow/definition",
      query: {
        t: Date.now(),
        pageNum: route.query.pageNum
      }
    });
  };

  onMounted(() => {
    const baseUrl =
      `${import.meta.env.VITE_APP_BASE_API}/warm-flow-ui/index.html?id=${route.params.id}&disabled=${route.query.disabled}`;
    url.value = baseUrl + `&Authorization=Bearer ` + getToken();
    window.addEventListener("message", handleMessage);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("message", handleMessage);
  });
</script>